var vId = 1;
var inputs = document.getElementsByTagName("input")

function add() {
	// alert(11)
	var v0 = inputs[0].value;
	var v1 = inputs[1].value;
	// alert(v0)
	// alert(v1)

	var oTr = document.createElement("tr");
	var oTd = document.createElement("td");
	oTd.innerHTML = vId++;
	oTr.appendChild(oTd)

	oTd = document.createElement("td");
	oTd.innerHTML = v0;
	oTr.appendChild(oTd)

	oTd = document.createElement("td");
	oTd.innerHTML = v1;
	oTr.appendChild(oTd)

	oTd = document.createElement("td");
	oTd.innerHTML = "<a href = 'javascript:;'>删除</a>&nbsp;<a href = 'javascript:;'>修改</a>";
	// var atags = oTd.getElementsByTagName("a")
	// //动态绑定事件
	// atags[0].onclick = del
	// atags[1].onclick = update
	// oTr.appendChild(oTd)

	document.getElementById("tbody").appendChild(oTr);

}
//字符串拼接实现增加
function add2() {
	var v0 = inputs[0].value;
	var v1 = inputs[1].value;
	//字符串拼接
	var html = "<tr>"
		+"<td>"+ vId++ +"</td>"
		+"<td>"+ v0 +"</td>"
		+"<td>"+ v1 +"</td>"
		+"<td><a href = 'javascript:;' onclick='del2(this)'>删除</a>&nbsp;<a href = 'javascript:;' onclick='update2(this)'>修改</a></td>"
	+"</tr>"

	// ES6新写法
	// var html = `
	// 	<tr>
	// 		<td>${vId++}</td>
	// 		<td>${v0}</td>
	// 		<td>${v1}</td>
	// 		<td><a href = 'javascript:;' onclick='del2(this)'>删除</a>&nbsp;<a href = 'javascript:;' onclick='update2(this)'>修改</a></td>
	// 	</tr>
	// `
	var tbody = document.getElementById("tbody");
	tbody.innerHTML += html
}
//动态绑定的删除事件
function del(){
	// alert(11)
	var tr = this.parentNode.parentNode;
	if(confirm("是否删除？")){
		document.getElementById("tbody").removeChild(tr)
	}
}
//静态绑定的删除事件
function del2(obj){
	// alert(11)
	var tr = obj.parentNode.parentNode;
	if(confirm("是否删除？")){
		document.getElementById("tbody").removeChild(tr)
	}
}

//修改
function update(){
	
}

function update2(obj){
	var td4 = obj.parentNode;
	var td3 = td4.previousSibling;
	var td2 = td3.previousSibling;
	var td1 = td2.previousSibling.innerHTML;
	console.log(td1)
	td2.innerHTML = "<input type = 'text' id = 'tN"+td1+"' value = '"+td2.innerHTML+"'/>";
	td3.innerHTML = "<input type = 'text' id = 'tA"+td1+"' value = '"+td3.innerHTML+"'/>";
	td4.innerHTML = "<a href = 'javascript:;'>保存</a>";
	td4.getElementsByTagName("a")[0].onclick= function(){
		td2.innerHTML = document.getElementById('tN'+td1).value;
		td3.innerHTML = document.getElementById('tA'+td1).value;
		td4.innerHTML = "<a href = 'javascript:;' onclick='del2(this)'>删除</a>&nbsp;<a href = 'javascript:;' onclick='update2(this)'>修改</a>"
	};
}

function sel(){
	var rows = document.getElementsByTagName("tr");
	var len = rows.length;
	for(var i =1;i<len;i++){
		rows[i].removeAttribute('style');
	}
	
	var v2 = inputs[2].value;
	if(v2==''){
		return 
	}
	for(var i =1;i<len;i++){
		var td = rows[i].cells[1].innerHTML
		if(td.indexOf(v2)>-1){
			rows[i].style.backgroundColor = 'green'
		}
	}
}